<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/common_css :: commonHeader('添加知识')"></head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-k-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="名称（必填）" id="kName" name="kName" maxlength="50" />
            </div>
        </div>
        <!--<div class="row cl">-->
            <!--<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>来源：</label>-->
            <!--<div class="formControls col-xs-8 col-sm-9">-->
                <!--<input type="text" class="input-text" placeholder="来源（必填）" id="source" name="source" maxlength="50" />-->
            <!--</div>-->
        <!--</div>-->

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>类别名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select id="kTypeId" name="kTypeId" class="input-text">
                    <option value="0" selected="selected">请选择类别名称</option>
                    <th:block th:each="item:${types}">
                        <option th:value="${item.id}" th:text="${item.typeName}"></option>
                    </th:block>
                </select>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">作物名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select id="cropIds" name="kTypeId" class="input-text">
                    <option value="0" selected="selected">请选择作物名称</option>
                    <th:block th:each="item:${zwmc}">
                        <option th:value="${item.id}" th:text="${item.cropName}"></option>
                    </th:block>
                </select>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">病害名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select id="diseaseNameIds" name="kTypeId" class="input-text">
                    <option value="0" selected="selected">请选择病害名称</option>
                    <th:block th:each="item:${bhmc}">
                        <option th:value="${item.id}" th:text="${item.name}"></option>
                    </th:block>
                </select>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">病害部位：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <th:block th:each="item:${bhwz}">
                    <input th:type="checkbox" th:name="bhbw_chk" th:value="${item.id}" th:id="${item.id}+a"/>
                    <label th:for="${item.id}+a" th:text="${item.areaName}"></label>
                </th:block>

                <!--<select id="diseaseAreaIds" name="kTypeId" class="input-text" th:multiple="multiple" th:size="10">-->
                    <!--<option value="0" selected="selected">请选择病害部位</option>-->
                    <!--<th:block th:each="item:${bhwz}">-->
                        <!--<option th:value="${item.id}" th:text="${item.areaName}"></option>-->
                    <!--</th:block>-->
                <!--</select>-->
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">病害特征：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <th:block th:each="item:${bhtz}">
                    <input th:type="checkbox" th:name="bhtz_chk" th:value="${item.id}" th:id="${item.id}+b"/>
                    <label th:for="${item.id}+b" th:text="${item.traitName}"></label>
                </th:block>
                <!--<select id="diseaseTraitIds" name="kTypeId" class="input-text" th:multiple="multiple" th:size="10">-->
                    <!--<option value="0" selected="selected">请选择病害特征</option>-->
                    <!--<th:block th:each="item:${bhtz}">-->
                        <!--<option th:value="${item.id}" th:text="${item.traitName}"></option>-->
                    <!--</th:block>-->
                <!--</select>-->
            </div>
        </div>


        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">概要：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="synopsis" id="synopsis" maxlength="200" class="textarea"  placeholder="概要说明...200个字符以内" onKeyUp="javascript:textareaLength(this);"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length"><span id="textareaLengthSpan">0</span></em>/200</p>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>内容：</label>
            <div class="formControls col-xs-8 col-sm-9">

                <script id="editor" type="text/plain" style="width:100%;height:500px;"></script>

            </div>
        </div>

        <div class="row cl">
            <div style="text-align: center;">
                <button class="btn btn-primary radius" type="button" onClick="add()">
                    <i class="Hui-iconfont">&#xe632;</i> 保存
                </button>
                &nbsp;&nbsp;
                <button onClick="layer_close();" class="btn btn-default radius" type="button">
                    &nbsp;&nbsp;取消&nbsp;&nbsp;
                </button>
            </div>
        </div>
    </form>
</article>

<script type="text/javascript" charset="utf-8" th:src="@{/js/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/js/ueditor/ueditor.all.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/js/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/js/ueditor/ueditor.js}"></script>
<div th:include="admin/common/common_js :: onLoadJS"></div>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js}"></script>
<script type="text/javascript" th:inline="javascript">

    var ue = UE.getEditor('editor');
    function add() {
        var kName = $("#kName").val();
        var kTypeId = $("#kTypeId").val();
        var cropIds = $("#cropIds").val();
        var diseaseNameIds = $("#diseaseNameIds").val();

        var diseaseAreaIds = "";
        var diseaseTraitIds = "";
        $("input[name='bhbw_chk']:checked").each(function(){
            if(diseaseAreaIds==""){
                diseaseAreaIds=$(this).val();
            }else{
                diseaseAreaIds+=","+$(this).val();
            }
        });

        $("input[name='bhtz_chk']:checked").each(function(){
            if(diseaseTraitIds==""){
                diseaseTraitIds=$(this).val();
            }else{
                diseaseTraitIds+=","+$(this).val();
            }
        });
        var synopsis = $("#synopsis").val();


//        var synopsis = $("#synopsis").val();
        var description= UE.getEditor('editor').getContent();
        if(kName == ''){
            layer.msg('请输入名称', {icon: 2});
            return false;
        }else if(kTypeId == "0"){
            layer.msg('请选类别', {icon: 2});
            return false;
        }else if(description == ""){
            layer.msg('请输入内容', {icon: 2});
            return false;
        }else if(synopsis == ""){
            layer.msg('请输入概要', {icon: 2});
            return false;
        }
        send(
            "/pestdiagnosis/sys/pest/addK",
            {kName:kName,kTypeId:kTypeId,description:description,cropIds:cropIds,diseaseNameIds:diseaseNameIds,diseaseAreaIds:diseaseAreaIds,diseaseTraitIds:diseaseTraitIds,synopsis:synopsis},
            function (data) {
                layer.msg(data.message, {icon: 1,time: 1500}, function() {
                    window.parent.location.href = "/pestdiagnosis/sys/pest/toKList";
                });
            },
            function (res) {
                layer.msg('网络异常，请稍后再试', {icon: 2});
            }
        );
    }
    // 计算文本域字符长度
    function textareaLength(obj) {
        $('#textareaLengthSpan').text($(obj).val().length);
    }
</script>
</body>
</html>